<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor
        :itemList="[
          { name: 'box-base', title: '基础信息' },
          { name: 'box-get', title: '收件人信息' },
        ]"
      />
    </div>

    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">基础信息</div>
          <customFormItem
            label="公告类型"
            name="contentType"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.radio.name"
            :config="{options: utils.getDictDataList('content_type')}"
            fullWidth
          />

          <customFormItem
            label="标题"
            name="title"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.textarea.name"
            fullWidth
            :config="{maxlength: 18, minRows: 3, maxRows: 5}"/>

          <customFormItem
            label="内容"
            name="content"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.textarea.name"
            fullWidth
            :config="{maxlength: 1000, autosize: false, minRows: 3, maxRows: 10}"/>
          <div id="box-get" class="box-title">收件人信息</div>

          <customFormItem
            label="接收类型"
            name="receiverType"
            :parent="_self"
            :form="form"
            :type="constCommon.formItemType.radio.name"
            :config="{options: utils.getDictDataList('receiver_type')}"
            fullWidth
            @change="receiverTypeChange"
          />

          <customFormItem
            label="部门选择"
            name="receiverNames"
            :parent="_self"
            :form="form"
            :readonly="true"
            :showSelectIcon="true"
            placeholder="选择部门"
            v-show="'dept' == form.receiverType"
            @focus="utilSelect.officeMore([form.receiverCodes], officeSelectConfirm)"
            fullWidth
          />
        </template>
      </customForm>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'

export default {
  data() {
    return {
      form: {
        receiverType: 'dept',
        contentType: 'announce',
        messageTypes: ['inner'],
        remark: '',
      },
      officeSelectVisible: false,
      viewData: {}
    }
  },
  components: {
    customAnchor
  },
  methods: {
    // 发送
    sendMsg() {
      this.$refs.editForm.validate().then((result) => {
        console.log('result', result)
        if (result) {
            this.utilMessage.confirm('是否发送系统公告', () => {
              this._sendMsg()
            })
        }
      })
    },
    _sendMsg() {
      this.utilVue.loadShow(true)
      this.$ajax.post('/msg/push/pushMessage', this.form).then(resp => {
        this.utilVue.loadHide()
        if (resp.code == 0) {
          this.utilMessage.success(resp.msg)
          this.form = {
            receiverType: 'dept',
            contentType: 'announce',
            messageTypes: ['inner'],
            receiverCodes: ['inner'],
            remark: '',
          }
        }
      })
    },
    resetForm() {
      this.$refs.editForm.resetFields()
    },
    // 部门选择
    officeSelectConfirm(selectedRows) {
      this.$set(this.form, 'receiverCodes', selectedRows.map(o => o.id).join(','))
      this.$set(this.form, 'receiverNames', selectedRows.map(o => o.label).join(','))
    },

    // 接受类型变化
    receiverTypeChange() {
      if (this.form.receiverType == 'all') {
        this.$set(this.form, 'receiverCodes', [])
        this.$set(this.form, 'receiverNames', [])
      }
    }
  },
  created() {
    let that = this
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$set(this.form, 'messageTypes', ['inner'])
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        if (!this.form.id) {
          this.$set(this.form, 'messageTypes', ['inner'])
          this.$set(this.form, 'contentType', 'announce')
          this.$set(this.form, 'receiverType', 'dept')
        }
        // 设置switch 元素默认值
      },
      afterSave: () => {
        // 用作返回自动主键
        this.form[this.propPrimaryKey] = this.propViewFormData[this.propPrimaryKey]
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      },
      afterClick(button, data, viewForm) {
        if (button.key == 'send') { // 发送公告
          that.sendMsg()
        }
      }
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object
  },
  computed: {}
}
</script>

<style lang="scss" scoped>
</style>
